<template>
	<view class="page">
		<view class="popup">
			<u-popup :show="show" mode="center" @close="close" @open="open">
				<scroll-view scroll-y="true" class="scroll-Y">
					 <view class="status_bar"></view>
					<view class="content">
						<view class="h-title">
							<view class="line"></view>
							<text>{{ $t('pages.quality.probProcess') }}:</text>
						</view>
						<!-- 问题工序列表 -->
							<view class="list-info">
								<view class="item" v-for="(item,index) in processInfo"
									:key="item.id">
									<view class="proName">{{ index + 1 }}.{{ item.processName }}</view>
									<view class="number">
										<u-number-box v-model="item.questionNum" integer :min="0">
											<view slot="minus" class="minus flex-center" :class="item.questionNum ? 'dis-block': 'dis-none'">
												一
											</view>
											<u--input slot="input" v-model="item.questionNum" type="number"
												@input="updateNumber($event,index,'processList')"
												class="input flex-center"></u--input>
											<view slot="plus" class="plus flex-center">
												+
											</view>
										</u-number-box>
									</view>
								</view>
							</view>
						</view>
						</scroll-view>
						<view class="footer">
							<view class="handle">
								<!-- <u-button @click="backTo">{{ $t('common.return') }}</u-button> -->
								<u-button type="primary" @click="confirmHadle">{{ $t('common.determine') }}</u-button>
							</view>
						</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import storage from "@/utils/storage.js"
	export default {
		props: {
			processInfo: {
				type: Array,
				default: () => []
			},
		},
		data() {
			return {
				show: false,
			};
		},
		onShow() {},
		mounted() {
		},
		methods: {
			close() {
				this.show = false
				if(this.processInfo && this.processInfo.length > 0) this.processInfo.map(item => item.questionNum = null)
			},
			open() {
				this.show = true
			},
			backTo() {
				this.show = false
			},
			confirmHadle() {
				this.$emit('submitSuccess', this.processInfo)
				this.show = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #3E8FF7;
	}
	.popup {
		.scroll-Y {
			height: 95%;
			// padding-bottom: 5%;
			background-color: #fff;
		}
		/deep/ .u-popup__content {
			width: 100%;
			height: 100%;
			padding-bottom: 5%;
		}
		.content {
			width: 100%;
			height: 80%;
			background-color: #FFFFFF;
			.h-title {
				display: flex;
				// margin-top: 1%;
				.line {
					background-color: #3E8FF7;
					width: 9.381rpx;
					height: 37.523rpx;
					margin-top: 13.133rpx;
					margin-right: 9.381rpx;
					margin-left: 9.381rpx;
				}
				text {
					font-size: 1.2rem;
				}
			}
			.list-info {
				margin: 1%;
				height: 100%;
				width: 100%;
				.item {
					width: 100%;
					min-height: 6%;
					display: flex;
					justify-content: space-between;
					margin-bottom: 2%;
					.proName {
						min-width: 60%;
						color: #585858;
						display: flex;
						align-items: center;
					}
					.number {
						min-width: 20%;
						height: 100%;
						margin-right: 5%;
						background-color: #FFFFFF;
						.u-number-box {
							width: 100%;
							height: 100%;
						}
						.dis-none {
							display: none;
						}
						.dis-block {
							display: flex;
						}
						.minus {
							width: 75.047rpx;
							height: 75.047rpx;
							border-radius: 4px;
							opacity: 1;
							box-sizing: border-box;
							border: 2px solid #3E8FF7;
							font-size: 1.2rem;
							font-weight: bold;
							color: #3E8FF7;
						}
						.plus {
							width: 75.047rpx;
							height:75.047rpx;
							padding-bottom: 7.505rpx;
							border-radius: 4px;
							opacity: 1;
							box-sizing: border-box;
							border: 2px solid #3E8FF7;
							font-size: 2.5rem;
							font-weight: 100;
							color: #3E8FF7;
						}
						.input {
							width: 100%;
							height: 50%;
							border-radius: 7.505rpx;
							border: 1px solid #DDDDDD;
							margin: 0 4%;
							font-size: 1.5rem;
							background-color: #FFFFFF;
							/deep/ .u-input__content__field-wrapper__field {
								height: 100%;
								font-size: 1rem!important;
								text-align: center;
							}
						}
					}
				}
			}
		}
	}


	.footer {
		position: fixed;
		width: 100%;
		min-height: 10%;
		display: flex;
		align-items: center;
		background-color: #fff;
		box-shadow: 0px -4px 12px 0px rgba(0, 0, 0, 0.3);
		bottom: 0;
		right: 0;

		.handle {
			width: 100%;
			height: 100%;
			display: flex;
			position: absolute;
			button {
				width: 100%;
				height: 100%;
				font-size: 2rem;
				// letter-spacing: 56.285rpx;
			}
		}
	}

</style>
